<template>
    <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './resize'
import mapapi from '@/api/mapapi/map'
import { listGroup } from '@/api/iot/group'
// import mapJson from './mapJson'

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '800px'
        },
    },
    data() {
        return {
            chart: null,
            countyList: [{
                name: '淮滨县',
                code: '411527'
            },
            {
                name: '固始县',
                code: '411525'
            },
            {
                name: '商城县',
                code: '411524'
            }, {
                name: '息县',
                code: '411528'
            }, {
                name: '潢川县',
                code: '411526'
            }, {
                name: '光山县',
                code: '411522'
            }, {
                name: '新县',
                code: '411523'
            }, {
                name: '罗山县',
                code: '411521'
            }, {
                name: '平桥区',
                code: '411503'
            }, {
                name: '浉河区',
                code: '411502'
            }, {
                name: '信阳',
                code: '411500_full'
            }],
            mapImg: '',
            tanchuangbj: require('../../imgModel/tanchuangbj.png'),
            listGroupData: []
        }
    },
    watch: {

    },
    created() {
        window.mapviewBtn = (tyep, id) => {
            this.mapviewBtnFun(tyep, id)
        }
        this.listGroupFun();
    },
    mounted() {
        // 地图底色
        this.mapImg = document.createElement("img");
        this.mapImg.style.height =
            this.mapImg.height =
            this.mapImg.width =
            this.mapImg.style.width =
            "300px";
        this.mapImg.src = require('../../imgUrl/mapAbj.png')


    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        listGroupFun() {
            listGroup({
                pageNum: 1,
                pageSize: 999
            }).then((res) => {
                this.listGroupData = res.rows

                for (let item of this.listGroupData) {
                    item['value'] = [item.longitude * 1, item.latitude * 1]
                }
                this.$nextTick(() => {
                    this.initChart()
                })
            })
        },
        mapviewBtnFun(type, id) {

            for (let item of this.listGroupData) {
                if (item.groupId == id) {
                    localStorage.setItem('arrowDownName', item.groupName)
                    localStorage.setItem('groupId', id)
                }
            }
            this.$emit('mapviewBtn', {
                type: type,
                id: id
            })

        },
        initChart() {
            this.chart = echarts.init(this.$el, 'macarons')
            this.setOptions('411500_full')
            this.chart.on('click', (params) => {

                // 检查点击的是否是地图之外的区域
                if (!params.componentType || params.componentType !== 'series') {
                    // 这里处理点击地图之外的区域的逻辑
                    for (let item of this.countyList) {
                        if (item.name == params.name) {
                            this.setOptions(item.code)
                        }
                    }
                } else {


                }
                // 处理点击事件
            });
            this.chart.on("dblclick", (params) => {
                this.setOptions('411500_full')
            })
        },
        setOptions(code) {
            let _this = this
            mapapi(code).then((res) => {
                let iconStyle = {
                    backgroundColor: {
                        image: 'https://longduxing.cn/assets/images/c4814be7309811e7b23600163e329925/admin-logo.png' // 替换为你的图标路径
                    },
                };
                echarts.registerMap('XY', res.data);
                _this.chart.setOption({
                    tooltip: {
                        renderMode: "html",
                        className: 'custom-tooltip-box', //设置背景图片
                        // alwaysShowContent: true,
                        // triggerOn: 'click',
                        enterable: true,
                        extraCssText: 'z-index: 99',
                        trigger: 'item',
                        hideDelay: 1000, // 设置提示框延时2000毫秒后自动隐藏
                        formatter: function (params, callback) {
                            let ss = `     <div
                                style="width: 400px;height: 150px;background-image:url(${_this.tanchuangbj});border-radius: 0px 0px 0px 0px;display: flex;background-size: 100% 100%;">
                                <div style="width: 100%;padding: 10px 20px;">
                                    <div style="font-weight:800;font-size: 18px;color: #FFFFFF;text-align: center;">${params.data.groupName}
                                    </div>

              
                                    <div style="display: flex;margin-top: 50px;">
                                        <div style="width: 50%;text-align: center;cursor: pointer;">
                                            <span onclick="mapviewBtn(2,${params.data.groupId})"
                                                style="cursor: pointer;background-color: #003756;color: white;font-size: 14px;padding: 7px 20px;border-radius: 5px;">工艺控制</span>
                                        </div>
                                        <div style="width: 50%;text-align: center;cursor: pointer;">
                                            <span onclick="mapviewBtn(3,${params.data.groupId})"
                                                style="cursor: pointer;background-color: #003756;color: white;font-size: 14px;padding: 7px 20px;border-radius: 5px;">数据分析</span>
                                        </div>
                                    </div>
                                </div>
                            </div>`
                            if (params.seriesType == "scatter") { return ss }

                            // <div style=" display: flex;">
                            //             <div style="width: 50%;margin-top: 5px;">
                            //                 <span style="font-weight: 500;font-size: 14px;color: #D5D5D8;">累计处理水量</span>
                            //                 <span
                            //                     style="font-weight: 500;font-size: 12px;color: #25CC27;padding: 0 10px;">555</span>
                            //             </div>
                            //             <div style="width: 50%;margin-top: 5px;">
                            //                 <span style="font-weight: 500;font-size: 14px;color: #D5D5D8;">24小时处理水量</span>
                            //                 <span
                            //                     style="font-weight: 500;font-size: 12px;color:#25CC27;padding: 0 10px;">589</span>
                            //             </div>
                            //         </div>
                            //         <div style=" display: flex;">
                            //             <div style="width: 50%;margin-top: 5px;">
                            //                 <span style="font-weight: 500;font-size: 14px;color: #D5D5D8;">实时处理水量</span>
                            //                 <span
                            //                     style="font-weight: 500;font-size: 12px;color: #25CC27;padding: 0 10px;">855</span>
                            //             </div>
                            //         </div>

                        },
                    },
                    geo: [
                        {
                            map: "XY", //引入地图数据
                            roam: false, //不开启缩放和平移
                            zoom: 1.1, //视角缩放比例
                            silent: true, //是否开启拖拽
                            label: {
                                show: true,
                                color: '#fff',
                                formatter: function (params) {
                                    // 使用 richText 添加图标
                                    return params.name;
                                },
                                rich: {
                                    icon: iconStyle
                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: "#81d7e7",
                                    areaColor: {
                                        image: this.mapImg, //dom是要填充的背景图，
                                        repeat: "repeat" //是否要重复背景
                                    },
                                    shadowColor: "rgba(30,49,105,1)",
                                    borderWidth: 1,
                                    shadowOffsetX: 0,
                                    shadowOffsetY: 0
                                },
                                emphasis: {
                                    //高亮的显示设置
                                    areaColor: "rgba(0, 200, 255,0.1)" //鼠标选择区域颜色
                                    // show: false,
                                },
                            },
                            selectedMode: "single", //选择模式，单选，只能选中一个地市
                            select: {//这个就是鼠标点击后，地图想要展示的配置
                                disabled: true,//可以被选中
                                itemStyle: {//相关配置项很多，可以参考echarts官网
                                    areaColor: "#1bd7d8",//选中
                                },
                                label: {
                                    color: "#ffffff"
                                }
                            },

                        },
                        //第一层投影
                        {
                            map: "XY",
                            zlevel: -1,
                            zoom: 1.12, //当前视角的缩放比例
                            roam: false, //是否开启平游或缩放
                            center: undefined,
                            show: true,
                            label: {
                                normal: {
                                    show: false,
                                },
                                emphasis: {
                                    show: false,
                                },
                            },
                            itemStyle: {
                                normal: {
                                    borderJoin: "round",
                                    borderColor: "#1c5ba5",
                                    borderWidth: 5,
                                    areaColor: "rgba(133,188,232,1)",
                                    shadowColor: "rgba(133,188,232,0.7)",
                                    shadowOffsetX: 0,
                                    shadowOffsetY: 0,
                                    shadowBlur: 25,
                                },
                                emphasis: {
                                    show: false,
                                },
                            },
                        },
                        // 第二层投影
                        {
                            map: "XY",
                            zlevel: -2,
                            zoom: 1.1, //当前视角的缩放比例
                            roam: false, //是否开启平游或缩放
                            center: undefined,
                            show: true,
                            label: {
                                normal: {
                                    show: false,
                                },
                                emphasis: {
                                    show: false,
                                },
                            },
                            itemStyle: {
                                normal: {
                                    borderJoin: "round",
                                    areaColor: "#81d7e7",
                                    shadowColor: "rgba(30,49,105,1)",
                                    shadowOffsetX: -5,
                                    shadowOffsetY: 6,
                                },
                                emphasis: {
                                    show: false,
                                },
                            },
                        },
                    ],
                    series: [
                        {
                            name: "站点",
                            type: "map",
                            geoIndex: 0,
                            // itemStyle: {
                            //     normal: { label: { show: true } },
                            //     emphasis: { label: { show: true } }
                            // },

                        },
                        {
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            data: this.listGroupData,
                            // 更多标点...
                            symbol: 'image://http://zyhjxy.cn/profile/iot/1/2025-0402-140543.png', // 图片 URL
                            Symbol: 'pin',
                            symbolSize: [30, 32], // 图标大小
                        }
                    ]
                })
            });


        }
    }
}
</script>
